<template>
	<view class="address-info">
		<view class="info-content">
			<u-form :model="form" ref="uForm" :error-type="['toast']">
				<u-form-item label="收货人：" label-width="180" :label-style="{ fontSize: '32rpx' }" prop="name">
					<u-input v-model="form.name" placeholder="请输入收货人姓名" />
				</u-form-item>
				<u-form-item label="手机号码：" label-width="180" :label-style="{ fontSize: '32rpx' }" prop="mobile">
					<u-input v-model="form.mobile" placeholder="请输入收货人手机号" maxlength="11" />
				</u-form-item>
				<u-form-item label="所以地区：" label-width="180" :label-style="{ fontSize: '32rpx' }" prop="region">
					<u-input v-model="form.region" :disabled="true" @click="show = true" placeholder="请选择所在地区" />
					<u-picker v-model="show" mode="region" :params="params" @confirm="confirm" :default-region="defaultRegion"></u-picker>
				</u-form-item>
				<u-form-item label="详细地址：" :border-bottom="false" label-width="180" :label-style="{ fontSize: '32rpx' }" prop="info">
					<u-input v-model="form.info" type="textarea" placeholder="如望海路12号之五556室" :height="100" />
				</u-form-item>
			</u-form>
		</view>
		<view class="button-bottom u-margin-top-22">
			<!-- <u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="false">{{item.name}}</u-checkbox>
			</u-checkbox-group> -->
			<u-checkbox-group>
				<u-checkbox shape="circle" active-color="#F5B340" v-model="item.checked" v-for="(item, index) in list" :key="index"
				 :name="item.name" :disabled="false" :label-disabled="false">设置为默认地址</u-checkbox>
			</u-checkbox-group>
			<u-button :custom-style="{
				width:'520rpx',
				height:'70rpx',
				fontSize:'32rpx',
				color:'rgba(255,255,255,1)',
				background:'#F5B340',
				lineHeight:'48rpx',
				marginTop:'200rpx'
			}"
			 @click="submit">保存</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	let addressCode = ""
	let prevPage = null;
	let addressIndex = ''
	let addressId = ""
	export default {
		data() {
			return {
				show: false,
				form: {
					name: '',
					mobile: '',
					info: '',
					region: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入收货人姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					mobile: [{
						required: true,
						message: '请输入收货人手机号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}, {
						pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57]|19[0-9]|16[0-9])[0-9]{8}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请输入正确的手机号'
					}],
					info: [{
						required: true,
						message: '请填写详细地址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					region: [{
						required: true,
						message: '请选择所在地区',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				},
				list: [{
					name: 'apple',
					checked: false,
					disabled: false
				}, ],
				defaultRegion: [],
				params: {
					province: true,
					city: true,
					area: true
				}
			};
		},
		onLoad(options) {
			prevPage = this.getCurrentPages()
			if (options.index && options.index != "undefined") {
				addressIndex = options.index
				addressId = prevPage.list[options.index].id
				this.form.name = prevPage.list[options.index].name
				this.form.mobile = prevPage.list[options.index].mobile
				this.form.info = prevPage.list[options.index].address
				this.list[0].checked = prevPage.list[options.index].default == "0" ? false : true
				let regStrArr = prevPage.list[options.index].address.split("-")
				// let ss = prevPage.list[options.index].address_no.split(",");
				this.defaultRegion  = [regStrArr[0], regStrArr[1], regStrArr[2]]
				// this.defaultRegion  = prevPage.list[options.index].address_no
				console.log(regStrArr)
				addressCode = `${prevPage.list[options.index].address_no[0]},${prevPage.list[options.index].address_no[1]},${prevPage.list[options.index].address_no[2]}`
				this.form.region = `${regStrArr[0]}-${regStrArr[1]}-${regStrArr[2]}`
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			prevPage = this.getCurrentPages()
			console.log(prevPage)

		},
		methods: {
			checkboxChange(e) {
				console.log(e)
			},
			checkboxGroupChange(e) {
				console.log(e)
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.showLoading({
							mask: true,
							title: "请求中..."
						})
						addressId !== "" && addressIndex != "" ? this.editAddress() : this.setAddressItem()
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			editAddress() {
				let params = {
					address_id: addressId,
					name: this.form.name,
					mobile: this.form.mobile,
					address_val: addressCode,
					address: this.form.region + '-' + this.form.info,
					default: !this.list[0].checked ? 0 : 1
				}
				this.$u.api.editAddress(params).then(res => {
					uni.hideLoading()
					if (res.errno === "000") {
						this.$refs.uToast.show({
							title: res.errmsg,
							type: 'success',
							back: true,
							// url: '/pages/user/index'
						})
						uni.$emit('updatadetail', {
							...res.result,
							addressIndex: Number(addressIndex)
						})
					} else {
						this.$refs.uToast.show({
							title: res.errmsg,
							type: 'error',
							// url: '/pages/user/index'
						})
					}
				})
			},
			setAddressItem() {
				let params = {
					name: this.form.name,
					mobile: this.form.mobile,
					address_val: addressCode,
					address: this.form.region + '-' + this.form.info,
					default: !this.list[0].checked ? 0 : 1
				}
				console.log(params)
				this.$u.api.setAddress(params).then(res => {
					uni.hideLoading()
					if (res.errno === "000") {

						// prevPage.$vm.baseData = true
						if (prevPage.list.length > 0 && this.list[0].checked) {
							prevPage.list[0].default = 0
							prevPage.list.unshift(res.result.data)
						} else {
							if (prevPage.list.length === 1) {
								prevPage.list.push(res.result.data)
							} else {
								prevPage.list.splice(1, 0, res.result.data)
							}
						}
						this.$refs.uToast.show({
							title: res.errmsg,
							type: 'success',
							back: true,
							// url: '/pages/user/index'
						})
					} else {
						this.$refs.uToast.show({
							title: res.errmsg,
							type: 'error',
							// url: '/pages/user/index'
						})
					}
				})
			},
			confirm(e) {
				console.log(e);
				addressCode = `${e.province.value},${e.city.value},${e.area.value}`
				this.defaultRegion[0] = e.province.label;
				this.defaultRegion[1] = e.city.label;
				this.defaultRegion[2] = e.area.label;
				this.form.region = `${e.province.label}-${e.city.label}-${e.area.label}`
			},
			getCurrentPages() {
				let pages = getCurrentPages();
				// #ifdef MP-WEIXIN  
				return pages[pages.length - 2].$vm;
				// #endif  
				return pages[pages.length - 2];
			}
		},
		onUnload() {
			this.$off('updatadetail')
		}
	};
</script>

<style>
	.address-info {
		width: 100vw;
		height: 100vh;
		background: rgb(241, 245, 246);
		padding-top: 26rpx;
		box-sizing: border-box;
	}

	.info-content {
		width: 720rpx;
		min-height: 486rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		margin: 0 auto;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.button-bottom {
		padding: 0 16rpx;
		box-sizing: border-box;
	}
</style>
